Prototype connections are one of the most important parts of Figma prototyping. They connect interactive elements such as buttons, cards, icons, navigation items, or frames to another destination so that users can experience how a digital product behaves.
In Figma, a prototype connection generally consists of a hotspot, connection, destination, trigger, action, and optional animation settings. These connections allow designers to simulate navigation, menus, overlays, scrolling, forms, and other user interactions before development begins.
For professional UI/UX and Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
A prototype connection is an interactive link between an element in a Figma design and another destination. It defines what should happen when a user interacts with a particular hotspot.
Interactive Element
↓
Prototype Connection
↓
Trigger
↓
Action
↓
Destination
↓
Animation / Result
A prototype connection tells Figma what should happen when a user interacts with an element such as a button, icon, card, image, menu item, or navigation control.
A prototype connection can be understood through several important parts.
| Part | Purpose | Example |
|---|---|---|
| Hotspot | Element where interaction begins | Login Button |
| Connection | Link between hotspot and destination | Prototype connection |
| Trigger | Defines how interaction starts | On Click / On Tap |
| Action | Defines what happens | Navigate To |
| Destination | Defines where the interaction goes | Dashboard |
| Animation | Controls transition behavior | Smart Animate |
A hotspot is the interactive area where a user performs an action. A hotspot can be a button, icon, image, card, text element, navigation item, frame, or another suitable layer.
┌────────────────────────────┐
│ │
│ Welcome to App │
│ │
│ [ Login ] │ ← Hotspot
│ │
└────────────────────────────┘
The connection is the visual link between the hotspot and the destination. In Figma, prototype connections are represented visually while working in Prototype mode.
The destination is the frame, screen, overlay, or other supported target where the interaction leads. For example, clicking a Login button can navigate from the Login frame to the Dashboard frame.
Login Frame
│
│ On Click
▼
Dashboard Frame
┌──────────────────┐
│ Login │
│ │
│ Email │
│ Password │
│ │
│ [ Login ] │
└────────┬─────────┘
│
│ On Click
▼
┌──────────────────┐
│ Dashboard │
│ │
│ Welcome User │
│ Statistics │
└──────────────────┘
The Prototype tab provides the controls needed to create and manage interactions, connections, triggers, actions, destinations, animations, and prototype flows.
Design Tab
↓
Select Element
↓
Prototype Tab
↓
Create Interaction
↓
Configure Connection
When an interactive layer is selected in Prototype mode, Figma displays a connection control on the layer. This control can be dragged toward another destination to create a prototype connection.
Select Button
↓
Find Prototype Handle
↓
Drag Connection
↓
Select Destination
↓
Set Trigger
↓
Set Action
↓
Set Animation
↓
Preview
A trigger determines what user action starts the interaction. Common triggers include clicking, tapping, hovering, dragging, pressing a key, or waiting for a specified delay.
| Trigger | Typical Use |
|---|---|
| On Click / On Tap | Buttons and navigation |
| While Hovering | Desktop hover interactions |
| Mouse Enter | Hover states and menus |
| Mouse Leave | Closing hover interactions |
| Mouse Down | Press interactions |
| Mouse Up | Release interactions |
| After Delay | Automatic transitions |
| Drag | Swipe and drag interactions |
| Keyboard / Gamepad | Keyboard or controller interactions |
An action defines what happens after the trigger occurs. For example, when a user clicks a Login button, the action can navigate the prototype to a Dashboard frame.
Trigger
On Click
↓
Action
Navigate To
↓
Destination
Dashboard
Navigate To is commonly used when the user should move from one screen to another screen.
Home
↓
Click Product
↓
Navigate To
↓
Product Details
The Back action allows users to return to the previous location in the prototype. It is useful for detail pages, settings screens, menus, and multi-step flows.
Home
↓
Product Details
↓
Back
↓
Home
Open Overlay displays another frame above the current frame. It is useful for menus, dialogs, dropdowns, filters, notifications, and confirmation messages.
Main Screen
↓
Click Menu
↓
Open Overlay
↓
Menu Appears
Close Overlay removes an active overlay and returns the user to the underlying screen.
Swap Overlay replaces one overlay with another overlay. It is useful for multi-step dialogs, menus, filters, and interactive popup experiences.
Scroll To allows an interaction to move the viewport to a specific location within a scrollable frame. It can be useful for navigation menus, table-of-contents links, and Back to Top buttons.
Change To is commonly used with interactive components and variants. Instead of navigating to an entirely different screen, it changes the state of the component.
Button
↓
On Click
↓
Change To
↓
Pressed State
Open Link can be used when a prototype interaction should open an external web URL. It is useful for website prototypes, social media links, documentation links, and external resources.
Animation controls how the prototype transitions from the current state to the destination. Choosing the correct animation helps communicate continuity and hierarchy.
| Animation | Purpose |
|---|---|
| Instant | Immediate transition without visible motion |
| Dissolve | Fade between screens |
| Smart Animate | Animate matching layers between states |
| Move In | Bring destination into view |
| Move Out | Move current content away |
| Push | Push current content away with destination |
| Slide In | Slide destination into view |
| Slide Out | Slide current content away |
Button Click
↓
Navigate To
↓
Dashboard
↓
Smart Animate
↓
Ease Out
↓
300ms Transition
A Login screen is one of the easiest projects for learning prototype connections.
Login Screen
↓
Click Login
↓
On Click
↓
Navigate To
↓
Dashboard
An e-commerce prototype can connect product cards, product details, cart buttons, checkout buttons, and confirmation screens.
Home
↓
Product Card
↓
Product Details
↓
Add to Cart
↓
Cart
↓
Checkout
↓
Order Confirmation
A food delivery prototype can use connections between restaurant listings, restaurant details, food items, cart, checkout, payment, and order tracking screens.
Restaurant List
↓
Restaurant Details
↓
Food Details
↓
Add to Cart
↓
Cart
↓
Checkout
↓
Order Tracking
Dashboard prototypes commonly use connections between navigation items, statistics cards, tables, reports, user details, and settings.
Dashboard
↓
Users
↓
User Details
↓
Edit User
↓
Save
↓
Confirmation
A single frame can contain multiple interactive elements, and each element can have its own prototype connection.
Dashboard
├── Users → Users Screen
├── Reports → Reports Screen
├── Settings → Settings Screen
├── Profile → Profile Screen
└── Logout → Login Screen
Multiple elements can connect to the same destination. For example, several product cards can navigate to the same product details screen.
Product Card 1 ──┐
Product Card 2 ──┤
Product Card 3 ──┼──→ Product Details
Product Card 4 ──┤
Product Card 5 ──┘
Navigation menus are one of the most common uses of prototype connections. Each navigation item can connect to its corresponding screen.
Navigation
├── Home → Home
├── About → About
├── Services → Services
├── Portfolio → Portfolio
└── Contact → Contact
A mobile bottom navigation bar can contain connections from each tab to its corresponding screen.
┌───────────────────────────────┐
│ Main Content │
│ │
├───────────────────────────────┤
│ Home │ Search │ Cart │ Profile│
└───┬──────┬──────┬──────┬─────┘
↓ ↓ ↓ ↓
Home Search Cart Profile
When a reusable navigation component is used across multiple screens, creating interactions in the main component can reduce repetitive work. Instances can inherit prototype connections from the main component.
A main component can contain prototype connections for reusable elements such as navigation tabs, back buttons, menus, and other repeated controls.
Main Navigation Component
↓
Create Connection
↓
Instances
┌─────┼─────┐
↓ ↓ ↓
Screen Screen Screen
1 2 3
Prototype interaction details can be copied and applied to other suitable elements. This is useful when multiple buttons or controls need the same interaction behavior.
Existing Interaction
↓
Copy
↓
Select New Element
↓
Paste
↓
Reuse Interaction
The destination of a connection can be changed when the user flow changes or when the prototype structure is updated.
Old Flow
Button → Screen A
Updated Flow
Button → Screen B
Unused or incorrect connections should be removed to keep the prototype clean and prevent unexpected navigation.
Prototype connections can be viewed while working in Prototype mode. Figma also provides controls for showing or hiding prototype connections so that designers can inspect the interaction structure.
Design Canvas
↓
Prototype Mode
↓
Show Connections
↓
Inspect Interaction
↓
Edit Connection
A prototype flow represents a connected user journey. Connections are the individual links that allow users to move through that journey.
Prototype Flow
↓
Login
↓
Dashboard
↓
Products
↓
Product Details
↓
Cart
↓
Checkout
A prototype flow should have an appropriate starting point. The starting point determines where the user begins when the prototype is presented.
Starting Point
↓
First Frame
↓
Connection
↓
Second Frame
↓
Connection
↓
Third Frame
Forms can use prototype connections to simulate actions such as submitting information, showing validation messages, displaying confirmation screens, or moving to the next step.
Registration Form
↓
Submit
↓
Validate
↓
Success ──→ Confirmation
↓
Error ────→ Error Message
Good prototypes should include important error states. For example, an invalid login attempt can lead to an error message instead of directly navigating to the dashboard.
Login
↓
Submit
↓
Validation
├── Valid → Dashboard
└── Invalid → Error Message
Interactive components can use connections to change between different component states. This is useful for buttons, toggles, checkboxes, tabs, dropdowns, switches, and other reusable UI elements.
Toggle
├── Off
│ ↓
│ Click
│ ↓
└── On
Connections can be used to open overlays above the current screen. This is useful for dropdown menus, dialogs, filters, notifications, and mobile navigation menus.
Main Screen
↓
Click Filter
↓
Open Overlay
↓
Filter Panel
Connections can also support scrolling-related interactions. For example, a Back to Top button can use a Scroll To action to move the viewport to a selected location within a scrollable frame.
Long Page
↓
Scroll Down
↓
[ Back to Top ]
↓
Scroll To
↓
Page Top
Smart Animate can be combined with prototype connections to create smooth transitions between frames when matching layers exist between the source and destination states.
Frame A
↓
Connection
↓
Frame B
↓
Smart Animate
↓
Smooth Transition
After creating a connection, animation settings can be adjusted to control how the transition feels. Easing controls motion behavior while duration controls how long the animation takes.
| Setting | Purpose |
|---|---|
| Easing | Controls acceleration and deceleration |
| Duration | Controls transition time |
| Direction | Controls movement direction when supported |
| Transition | Defines the type of visual change |
Previewing the prototype is essential because a connection that looks correct on the canvas may still produce an unexpected result when the interaction is actually performed.
Create Connection
↓
Preview
↓
Perform User Action
↓
Observe Result
↓
Identify Problem
↓
Edit Connection
↓
Preview Again
Login
↓
Enter Credentials
↓
Click Login
↓
Validation
├── Valid → Dashboard
└── Invalid → Error
Home
↓
Product Listing
↓
Product Details
↓
Add to Cart
↓
Cart
↓
Checkout
↓
Payment
↓
Confirmation
Home
↓
Restaurant List
↓
Restaurant Details
↓
Food Details
↓
Add to Cart
↓
Cart
↓
Checkout
↓
Order Tracking
Login
↓
Dashboard
├── Analytics
├── Reports
├── Users
│ ↓
│ User Details
│ ↓
│ Edit User
└── Settings
Home
├── Search
├── Categories
├── Cart
└── Profile
Bottom Navigation
↓
Multiple Prototype Connections
↓
Corresponding Screens
| Topic | Key Point |
|---|---|
| Hotspot | Element where interaction begins |
| Connection | Link between interaction source and destination |
| Trigger | Defines what starts the interaction |
| Action | Defines what happens after the trigger |
| Destination | Target screen or interaction result |
| Navigate To | Moves the user to another frame |
| Back | Returns to a previous location |
| Overlay | Displays content above the current screen |
| Scroll To | Moves the viewport to a selected location |
| Change To | Changes a component state or variant |
| Animation | Controls visual transition behavior |
| Prototype Flow | Represents a complete user journey |
1. Learn Figma Frames
↓
2. Create Multiple Screens
↓
3. Understand User Flows
↓
4. Select Interactive Elements
↓
5. Learn Hotspots
↓
6. Create Prototype Connections
↓
7. Learn Triggers
↓
8. Learn Actions
↓
9. Configure Destinations
↓
10. Add Animations
↓
11. Learn Overlays
↓
12. Learn Scrolling
↓
13. Use Interactive Components
↓
14. Build Complete Flows
↓
15. Preview Prototype
↓
16. Test User Experience
↓
17. Fix Connection Problems
↓
18. Prepare Prototype for Handoff
Creating prototype connections is a fundamental Figma skill for transforming static UI designs into interactive experiences. A well-designed connection allows users to navigate between screens, open overlays, change component states, scroll through content, and experience realistic product behavior.
By understanding hotspots, connections, triggers, actions, destinations, animations, components, and prototype flows, designers can create realistic prototypes that are easier to test, present, and communicate to development teams.
The best approach is to begin with a clear user flow, create only meaningful connections, select appropriate triggers and actions, use animations purposefully, and thoroughly test the final prototype.
For professional Figma and UI/UX training, visit JustAcademy Figma Training and Register for Figma Course Demo.
